<template>
  <div class="wodedingdan">
    <head_>
      <h1>我的充值订单</h1>
    </head_>
    <div class="dingdan_list">
      <!-- <ul v-for="(item, index) in list" :key="item.id" @click="go_detail(index)"> -->
      <ul v-for="(item) in list" :key="item.id" @click="account_order_operation(item.id, item.state, item.money)">
        <li>
          <img src="../../assets/dingdanxinxi/kehuyue.jpg" alt />
        </li>
        <li>
          <p>
            <span>订单号：</span>
            <span v-text="item.id"></span>
            <span>订单操作   ></span>
          </p>
          <p>充值金额：{{ item.money }}</p>
          <!-- <p>生成日期：{{ item.addtime }}</p> -->
          <p v-if="item.state==0">充值状态：未支付</p>
          <p v-else-if="item.state==1">充值状态：充值成功</p>
          <p v-else-if="item.state==2">充值状态：充值失败</p>
          <p v-else-if="item.state==3">充值状态：充值取消</p>
          <p v-else-if="item.state==4">充值状态：订单超时</p>
        </li>
      </ul>
    </div>
    <!-- 状态详情pop-->
    <div id="account_order_operation_bored">
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show_operations">
        <div class="sg-qrcode">
          <!-- <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
            backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
            logoBackgroundColor="black"></vue-qr> -->
          <h1 id="ddd">订单操作</h1>
          <!-- <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ paystatus }}</div> -->
          <!-- 订单支付pop-->
          <div v-model="flsdd">
            <van-radio-group v-model="radio">
              <van-cell-group>
                <van-cell clickable @click="radio = '1'" class="wei_x">
                  <img src="../../assets/dingdanxinxi/weixin.jpg" alt />
                  微信
                  <template #right-icon>
                    <van-radio name="1" icon-size=".32rem" />
                  </template>
                </van-cell>
                <van-cell clickable @click="radio = '2'" class="wei_x">
                  <img src="../../assets/dingdanxinxi/zhifubao.jpg" alt />
                  支付宝
                  <template #right-icon>
                    <van-radio name="2" icon-size=".32rem" />
                  </template>
                </van-cell>
              </van-cell-group>
            </van-radio-group>
          </div>
          <div v-if="account_order_state == 0">
            <van-button class="log" round block type="info" :style="{ width: '100px', height: '40px'}"
              @click="to_do">继续支付
            </van-button>
            <van-button class="log cancel" round block type="info" :style="{ width: '100px', height: '40px'}"
              @click="not_to_do">取消订单
            </van-button>
          </div>

          <div v-else-if="account_order_state == 1">
            <h3>该订单已完成</h3>
          </div>
          <div v-else-if="account_order_state == 2">
            <h3>该订单已失败</h3>
          </div>
          <div v-else-if="account_order_state == 3">
            <h3>该订单已取消</h3>
          </div>
          <div v-else-if="account_order_state == 4">
            <h3>该订单已超时</h3>
          </div>
        </div>

      </van-popup>

    </div>

    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show_operations2">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
            backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
            logoBackgroundColor="black"></vue-qr>
          <h2>请用微信扫码支付</h2>
          <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ account_order_state }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 45px' }"
            @click="yizhifu_weixin">
            已支付</van-button>

        </div>
      </van-popup>
    </div>
    <div>
      <van-popup :style="{ width: '80%', height: '45%', padding: '10px' }" v-model="show3">
        <div class="sg-qrcode">
          <vue-qr :text="code_url" :correctLevel="3" :size="250" :margin="10" colorDark="green" colorLight="white"
                  backgroundColor="white" backgroundDimming="white" :logoScale="0.2" :logoMargin="5"
                  logoBackgroundColor="black"></vue-qr>
          <h2>请用支付宝扫码支付</h2>
          <h2>￥<b>0.01</b>元 </h2>
          <div>订单的状态:{{ paystatus }}</div>
          <van-button class="log" round block type="info" :style="{ width: '150px', height: '50px', margin: '0 auto' }"
                      @click="yizhifu_zfb1">
            已支付</van-button>
        </div>
      </van-popup>
    </div>
  </div>
</template>

<script>

//import { myOrder } from "@/request/home/home_http";
import {
  queryAccountOrderByMemberId,
  accountOrderCancel,
  getNativeCodeUrl,
  queryPayStatus,
  addmoney,
  addmoney1,
  getNativeCodeUrlAli,
  getNativeCodeUrlNo,
  getNativeCodeUrl1, queryPayStatus1, bag
}
from "../../request/userinfo/userinfo";
import head_ from "./header";
import vueQr from 'vue-qr';
import {Toast} from "vant";
import Vue from "vue";
Vue.use(vueQr);
export default {
  props: {},
  data() {
    return {
      list: [],
      childlist: null,
      show_operations: false,
      show_operations2: false,
      account_order_id: null,
      account_order_state: null,
      code_url: "",
      money: null,
      codeUrl:'',
      memberId:"",
      flsdd: false,
      show3: false,
      radio: "1",
      paystatus: "",
    };
  },
  methods: {
    account_order_operation(account_order_id, account_order_state, money){
      this.show_operations = true;
      this.account_order_id = account_order_id;
      this.account_order_state = account_order_state;
      this.money = money;
    },
    //继续支付订单
    to_do(){
      //this.flsdd=true;
      if (this.radio=="1"){
        //获得二维码
        getNativeCodeUrlNo({
          id: this.account_order_id,
          amount: this.money,
          // memberId: this.$store.state.userbag.id
        })
            .then((res) => {
              this.show_operations = false;
              this.show_operations2 = true;
              //console.log(res)
              this.code_url = res.data.codeUrl;
            });
        this.show2 = true;
      }
      if (this.radio=="2"){
        getNativeCodeUrlAli({
          id: this.account_order_id,
          amount: this.money,
        })
          .then((res) => {
            this.code_url = res.data.url;
            this.id = res.data.orderId;
            this.amount = res.data.money;
            this.memberId = this.$store.state.userbag.id
          });
        this.show3 = true;
      }
    },

    yizhifu_zfb1() {
      //console.log("2===="+this.amount);
      queryPayStatus1({
        //传递accountOrderId
        id: this.id,
      })
        .then((r) => {
          //console.log(r);
          this.paystatus = r.data.msg;
          if (this.paystatus == "支付成功") {
            //console.log("1===="+this.amount);
            addmoney1({
              amount: this.amount,
              memberId: this.$store.state.user.id
            })
            .then((res) => {
              confirm("充值成功");
              //console.log(res);
              this.show_operations=false;
              this.flsdd = false;
              this.show_operations2 = false;
              this.show3 = false;
              //刷新数据
              bag({
              }).then((res) => {
                //console.log(res);
                this.$store.state.userbag = res.data;
              });
              //this.$router.push("/banner");//完成后跳转
            });
          } else if(r.code == 501){
            this.paystatus = "订单超时，请重新购买"
          } else {
            this.paystatus = "未检测到支付完成，请重新点击按钮"
          }
        });
    },
    //取消订单
    not_to_do(){
      accountOrderCancel({
        id: this.account_order_id,
        state: 3,
      }).then((r)=>{
        if(r.code == 2000){
          console.log("yes")
          this.preLoad();
          this.show_operations = false;

        }
      }).catch((r)=>{
        if(r.code != 200){
          this.show_operations = false;
        }
      })
    },
    //此处是点击已支付后检查是否确实已支付
    yizhifu_weixin() {
      queryPayStatus({
        //传递accountOrderId
        id: this.account_order_id,
      })
        .then((r) => {

          this.paystatus = r.msg;
          if (this.paystatus == "支付成功") {
            addmoney({
              amount: this.money,
              memberId: this.$store.state.user.id
            })
              .then((res) => {

                confirm("充值成功");
                this.flsdd = false;
                this.show_operations2 = false;
                this.preLoad();
                this.$router.push("/wallet");//完成后跳转
              });
          } else if(r.code == 501){
            this.paystatus = "订单超时，请重新购买"
          } else {
            this.paystatus = "未检测到支付完成，请重新点击按钮"
          }


        });
    },
    // go_detail(account_order) {
    //   this.$router.push(`/xiangqing1?id=${account_order}`);
    // },
    preLoad(){
      queryAccountOrderByMemberId({
          memberId: this.$store.state.user.id
      }).then((res) => {
       // console.log(res)
        //console.log("ddd")
        if (res.code == 2000) {
         // console.log(res)
          this.list = res.data;

          //this.$toast.fail("成功");
          // this.childlist = res.data;
          // let list1 = Array.from(res.data);


          // list1.forEach((item) => {
          //   let start = new Date(item.startTime);
          //   let end = new Date(item.endTime);
          //   let date = `${start.getFullYear()}年${start.getMonth() + 1
          //     }月${start.getDate()}日`;
          //   this.list.push({
          //     titl: item.carName,
          //     id: item.id,
          //     time: Math.ceil((end - start) / 1000 / 60 / 60 / 24),
          //     day: date,
          //   });
          // });
          // console.log(res)
        } else {
          alert(res.message);
        }
      });
    }
  },
  components: {
    head_,
  },
  mounted() {
    this.preLoad();

    // this.axios({
    //   url: "http://localhost:14966/order/queryById?id=" + this.$store.state.user.id,
    //   method: "get",
    //   data: {
    //   },
    //   headers: {
    //     "token": window.localStorage.getItem("token"),
    //     "Content-Type": "application/json;charset=UTF-8",
    //   },
    // }).then((res) => {
    //   console.log(res)
    //   this.childlist = res.data.data.order;
    //   // //用Array.from（）方法转换为数组，并用list变量接收
    //   let list1 = Array.from(res.data.data.order);
    //   list1.forEach((item) => {
    //     let start = new Date(item.startTime);
    //     let end = new Date(item.endTime);
    //     let date = `${start.getFullYear()}年${start.getMonth() + 1
    //       }月${start.getDate()}日`;
    //     this.list.push({
    //       titl: item.carName,
    //       id: item.id,
    //       time: Math.ceil((end - start) / 1000 / 60 / 60 / 24),
    //       day: date,
    //     });
    //   });
    // });
  },
};
</script>

<style scoped lang="less">
#account_order_operation_bored h1{
  font-size: 300%;
  font-weight: 600;
  height: 230px;
}
#account_order_operation_bored h3{
  font-size: 200%;
  color: #000;
}
.cancel{
  background-color: gray;
  border: 1px solid #000;
}
.log{
  margin-left: 15px;
  float: left;
}
.wodedingdan {
  width: 100%;
  height: 100%;
  font-size: 0;

  .dingdan_list {
    width: 100%;
    height: 100%;
    background-color: #eeeeee;
    padding: 0.1rem 0;

    ul {
      width: 95%;
      height: 1.8rem;
      background: white;
      margin: 0.2rem auto;
      border-radius: 0.08rem;
      display: flex;
      align-items: center;

      // li {
      //   height: 90%;
      // }

      li:nth-child(1) {
        // flex: 1;
        display: flex;
        justify-content: center;
        align-items: center;

        img {
          width: 1.2rem;
          height: 1.3rem;
          margin-left: 0.1rem;
        }
      }

      li:nth-child(2) {
        flex: 2;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;

        p {
          padding: 0 0.21rem;
        }

        p:nth-child(1) {
          //display: flex;
          justify-content: space-between;

          span:nth-child(1) {
            font-size: 0.18rem;
          }

          span:nth-child(2) {
            font-weight: 600;
            font-size: 0.18rem;
          }

          span:nth-child(3) {
            font-weight: 600;
            color: #999;
            font-size: 0.24rem;
            float: right;
          }
        }

        p:nth-child(1),
        p:nth-child(2),
        p:nth-child(3) {
          font-size: 0.23rem;
          color: #666;
        }
      }
    }
  }
}

//wallet的样式复制
.wodedingdan {
  font-size: 0.24rem;
  margin: 0;
}

.flas_xis {
  height: 4.44rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.flas_xis>div:last-child {
  background-color: #f3966e;

  .bor_rder {
    background-color: #f08c29;
  }
}

.mingxi_mudaikuangdanji {
  width: 100%;
  background-color: #1885fe;
  height: 2rem;
  border-radius: 0.18rem;
  display: flex;
  justify-content: space-between;

  .border_left {
    margin-left: 0.48rem;
    color: white;

    &>p:last-child {
      margin-top: 0.1rem;
    }

    &>p {
      font-size: 0.24rem;

      &>.storng {
        font-size: 0.48rem;
      }
    }
  }

  &>div {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  &>div>.bor_rder {
    color: white;
    font-size: 0.24rem;
    background-color: #0d5fd7;
    width: 1.32rem;
    height: 0.6rem;
    line-height: 0.6rem;
    text-align: center;
    border-top-left-radius: 0.3rem;
    border-bottom-left-radius: 0.3rem;
  }
}

.recharge {
  font-size: 0.28rem;
  color: #000;

  .nav_flas {
    line-height: 0.86rem;
    height: 0.86rem;
  }

  .jussd_s {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    box-sizing: border-box;

    &>.bor_bluck {
      border-left: 2px solid #3d88f7;
      border-right: 2px solid #3d88f7;
      border-top: 2px solid #3d88f7;
      border-bottom: 2px solid #3d88f7;
    }

    &>li {
      box-sizing: border-box;
      width: 2.24rem;
      height: 0.99rem;
      border-radius: 0.06rem;
      background-color: #f2f2f2;
      border-top: 2px solid #fafafa;
      border-bottom: 2px solid #fafafa;
      display: flex;
      flex-direction: column;
      text-align: center;
      justify-content: center;
      margin-bottom: 0.09rem;

      &>.last_ch {
        margin-top: 0.1rem;
        font-size: 0.24rem;
        color: #333333;
      }
    }
  }
}

.taichu_c {
  color: #333333;
  margin: 0.38rem 0.3rem 0.3rem 0.3rem;

  &>p {
    font-size: 0.28rem;
  }

  &>div {
    margin-top: 0.24rem;
  }

  &>div>p {
    line-height: 0.38rem;
  }
}

.wei_x {
  font-size: 0.28rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 0.8rem;
  padding: 0;

  &>div {
    display: flex;
    align-items: center;

    &>img {
      margin-right: 0.29rem;
      width: 0.48rem;
      height: 0.48rem;
    }
  }
}

.xuan_zhuan {
  transform: rotateZ(90deg);
  width: 0.26rem;
  height: 0.26rem;
}

.zhifu {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #3d88f7;
  color: white;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.zhifus {
  font-size: 0.36rem;
  border-radius: 0.08rem;
  background-color: #f2f2f2;
  color: #999999;
  width: 5rem;
  height: 1rem;
  text-align: center;
  line-height: 1rem;
  margin: 0.35rem auto 0;
}

.botm_sc {
  input {
    height: 100%;
    width: 100%;
    color: #0d5fd7;
    text-align: center;
    border: none;
    border: 2px solid #3d88f7;
    border-radius: 0.08rem;
  }
}

.van-loading__spinner--spinner {
  width: 1rem !important;
  height: 1rem !important;
}

.van-toast {
  width: 1rem;
  height: 1rem;
}

.sg-qrcode {
  /*color: deepskyblue;*/
  color: #2ba245;
}

</style>
